<template>
  <div>
    <el-dialog
      title="任务详情"
      :visible.sync="dialogVisible"
      :modal="true"
      :appendToBody="true"
      width="1000px"
      v-dialog-drag
      :close-on-click-modal="false"
      top="5vh"
      @close="handleClose()"
      @open="handleOpen()"
    >
      <div v-loading="loading" class="dialog-content">
        <el-row>
          <el-col :span="3"> 任务ID </el-col>
          <el-col :span="9"> {{ form.id }} </el-col>
          <el-col :span="3"> 任务名称 </el-col>
          <el-col :span="9">
            {{ form.taskName
            }}<el-button
              type="text"
              class="detail-btn"
              @click="handleTaskConfig"
              >查看任务配置</el-button
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3"> 任务类型 </el-col>
          <el-col :span="9"> {{ form.taskTypeName }} </el-col>
          <el-col :span="3"> 任务性质 </el-col>
          <el-col :span="9"> {{ form.taskNatureName }} </el-col>
        </el-row>
        <el-row>
          <el-col :span="3"> 车间 </el-col>
          <el-col :span="9"> {{ form.ownedWorkshopName }} </el-col>
          <el-col :span="3"> 产线 </el-col>
          <el-col :span="9"> {{ form.ownedProductionLineName }} </el-col>
        </el-row>
        <el-row>
          <el-col :span="3"> 执行人 </el-col>
          <el-col :span="9">
            {{ getOperatorLabel }}
          </el-col>
          <el-col :span="3"> 审核人 </el-col>
          <el-col :span="9"> {{ form.auditorName }} </el-col>
        </el-row>
        <el-row>
          <el-col :span="3"> 是否需审核 </el-col>
          <el-col :span="9"> {{ form.isExamine == "Y" ? "是" : "否" }} </el-col>
          <el-col :span="3"> 任务时间 </el-col>
          <el-col :span="9">
            {{
              form.actualExecuteStartTime + " - " + form.actualExecuteEndTime
            }}
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="3"> 当前状态 </el-col>
          <el-col :span="9">{{ form.statusName }}</el-col>
        </el-row>
        <el-row class="step-content">
          <el-col :offset="3" :span="21">
            <el-timeline>
              <el-timeline-item
                v-for="(item, i) in stepDetail"
                :key="i"
                :color="i == 0 ? '#34855b' : ''"
                :timestamp="item.operateTime"
                placement="top"
                :hide-timestamp="true"
                size="large"
              >
                <span class="time desc">{{ item.operateTime }}</span>
                <div class="title">
                  {{ item.execResult }}
                  <el-button
                    type="text"
                    class="detail-btn"
                    @click="handleDetail(item)"
                    >查看内容</el-button
                  >
                </div>
                <div class="desc">{{ item.operatorName || item.operator }}</div>
                <div class="desc">{{ item.remark }}</div>
              </el-timeline-item>
            </el-timeline>
          </el-col>
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 查看表单 -->
    <FormContentDialog
      :visible.sync="formContentDialog.visible"
      :row="formContentDialog.row"
      :item="formContentDialog.item"
    ></FormContentDialog>
    <!-- 任务配置详情 -->
    <ConfigDetailDialog
      :visible.sync="configDetailDialog.visible"
      :row="configDetailDialog.row"
      :disabled="true"
    ></ConfigDetailDialog>
  </div>
</template>
<script>
import FormContentDialog from "../components/formContentDialog";
import ConfigDetailDialog from "../configuration/detailDialog";
import { getTaskDetail, getTaskStepDetail } from "@/api/taskMgmt/center";
export default {
  components: { FormContentDialog, ConfigDetailDialog },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        id: "",
        taskName: "",
        taskType: "",
        taskTypeName: "",
        taskNatureName: "",
        ownedFactoryName: "",
        ownedWorkshopName: "",
        ownedProductionLineName: "",
        operator: "",
        operatorName: "",
        auditor: "",
        auditorName: "",
        executiveAgency: "",
        executiveAgencyName: "",
        operatorType: "",
        isExamine: "",
        actualExecuteStartTime: "",
        actualExecuteEndTime: "",
        statusName: "",
        taskConfigId: "",
        renderingMode: "",
        taskFormName: ""
      },
      stepDetail: [
        {
          id: "1",
          remark: null,
          searchValue: null,
          missionCenterId: 1,
          operator: "zhourongxin1",
          operateTime: "2023-10-13 10:47:46",
          execResult: "通过",
          execStatus: "1",
        },
        {
          id: "2",
          remark: null,
          searchValue: null,
          missionCenterId: 1,
          operator: "zhourongxin1",
          operateTime: "2023-10-13 10:47:46",
          execResult: "通过",
          execStatus: "1",
        },
      ],
      formContentDialog: {
        visible: false,
        row: null,
        item: null,
      },
      configDetailDialog: {
        visible: false,
        row: null,
      },
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val);
      },
      get() {
        return this.visible;
      },
    },
    getOperatorLabel() {
      const form = this.form;
      if (form.operatorType == "dept") {
        // 显示部门
        return form.executiveAgencyName || form.executiveAgency;
      }

      let operatorName = form.operatorName;

      // if (this.postManageDictObj.hasOwnProperty(form.operator)) {
      //   // 显示岗位
      //   operatorName = this.postManageDictObj[form.operator];
      // } else {
      //   // 显示工位
      //   operatorName = form.operatorName;
      // }

      return operatorName || "";
    },
    postManageDictObj() {
      return this.dictToMap(this.dict.PostManage);
    },
  },
  methods: {
    handleClose() {},
    handleOpen() {
      this.getDetails();
      this.getStepDetail();
    },
    // 查询详情
    getDetails() {
      if (!this.row?.id) {
        return;
      }
      this.loading = true;
      getTaskDetail(this.row.id)
        .then((res) => {
          const {
            id,
            taskName,
            taskType,
            taskTypeName,
            taskNatureName,
            ownedFactoryName,
            ownedWorkshopName,
            ownedProductionLineName,
            operator,
            operatorName,
            auditor,
            auditorName,
            executiveAgency,
            executiveAgencyName,
            operatorType,
            isExamine,
            actualExecuteStartTime,
            actualExecuteEndTime,
            statusName,
            taskConfigId,
            renderingMode,
            taskFormName
          } = res.data || {};
          this.form = {
            id,
            taskName,
            taskType,
            taskTypeName,
            taskNatureName,
            ownedFactoryName,
            ownedWorkshopName,
            ownedProductionLineName,
            operator,
            operatorName,
            auditor,
            auditorName,
            executiveAgency,
            executiveAgencyName,
            operatorType,
            isExamine,
            actualExecuteStartTime,
            actualExecuteEndTime,
            statusName,
            taskConfigId,
            renderingMode,
            taskFormName
          };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 查询流程详情
    getStepDetail() {
      if (!this.row?.id) {
        return;
      }
      getTaskStepDetail(this.row.id)
        .then((res) => {
          this.stepDetail = res?.data || [];
        })
        .catch(() => {
          this.stepDetail = [];
        });
    },
    // 查看任务配置
    handleTaskConfig() {
      this.configDetailDialog.row = { id: this.form?.taskConfigId }; //配置id
      this.configDetailDialog.visible = true;
    },
    // 查看某流程节点的表单详情
    handleDetail(item) {
      this.formContentDialog.row = this.form;
      this.formContentDialog.item = item;
      this.formContentDialog.visible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog-content {
  line-height: 32px;
  padding-left: 20px;
}
.detail-btn {
  margin-left: 20px;
  padding: 0;
}
.step-content {
  margin-top: 20px;
  .time {
    line-height: 22px;
    position: absolute;
    left: -16px;
    top: 0;
    transform: translateX(-100%);
  }
  .title {
    line-height: 22px;
  }
  .desc {
    color: #979797;
  }
}
.el-col {
  min-height: 1px;
}
</style>
